<template>
	<view class="pb100 pr">
		<image src="/static/img/index/detailbg.png" class="w-max pa top0 left0" mode="widthFix"></image>
		<navbar :back="true" :backgroundColor="background" :scrollTop="scrollTop" :title="data.name" titleColor="#fff">
		</navbar>
		<view class="p20">
			<othD :data="data" /> 
		</view>
		<view class="m20  mt38">
			<view class=" flex">
				<view class="fs28 fw-700 bottom pb6">服务项目</view>
			</view>
			<!-- <view class="flex mt18">
				<view class="color-666 fs26 ">全部医院</view>
				<image src="/static/img/index/sx.png" class="h18 w18 ml16" mode=""></image>
			</view> -->
		</view>
		<view class="">
			<serviceList :list="service" :master_id="$params.master_id" />
		</view>
		<view class="m20 flex">
			<view class="fs28 fw-700 bottom pb6">
				用户评价
			</view>
		</view>
		<view class="bg-fff radius12 m20">
			<view class="p20 pt30 bg-fff radius20 flex flex-wrap ">
				<view v-for="(item,index) in data.comment_word" :key="index" @click="comment_word=item"
					class="bg-f8f px28 py12 radius32 mr30 mb24 color-999" :class="comment_word==item?'on color-zs':''">
					{{item}}
				</view>
			</view>
			<commentList :list="comment" />
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				background: {
					backgroundImage: 'linear-gradient(180deg, #00C2CF 0%, #1ED2BE 100%)',
				},
				current: 0,

				data: '',

				service: '',

				comment: '',
				comment_word: ''
			};
		},
		watch: {
			comment_word() {
				this.masterComment()
			}
		},
		onLoad() {
			this.getData()
			this.getList()
			this.masterComment()
		},
		onReachBottom() {
			// this.getList('down')
		},
		methods: {
			getData() {
				this.$request('/member/search/masterInfo', this.$params).then(res => {
					let data = res.data
					this.data = data
					uni.setNavigationBarTitle({
						title:data.name
					})
					this.shareData.title=this.$config.shop_title+' 陪诊师:'+data.name
				})
			},
			// masterComment() {
			// 	this.$request('/member/search/masterComment', this.$params).then(res => {
			// 		let data = res.data
			// 		this.comment = data
			// 	})
			// },
			getList(e) {
				e == 'down' ? this.page++ : this.page = 1
				let params = {
					...this.$params,
					page: this.page,
				}
				this.$request('/member/search/masterService', params).then(res => {
					let list = res.data.data
					e == 'down' ? this.service.push(...list) : this.service = list
				})
			},
			masterComment(e) {
				e == 'down' ? this.page++ : this.page = 1
				let params = {
					...this.$params,
					comment_word: this.comment_word,
					page: this.page,
				}
				this.$request('/member/search/masterComment', params).then(res => {
					let list = res.data.data
					e == 'down' ? this.comment.push(...list) : this.comment = list
				})
			},
		},
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop
		},
	}
</script>

<style lang="scss">
	page {
		background: #F8F8F8 ;
	}

	.on {
		// box-sizing: border-box;
		// margin: -1rpx;
		background-color: rgba($color: $zs, $alpha:0.07);
		// background: rgba(0,190,195,0.07);
		border: 1rpx solid $zs;
	}
</style>
